<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>资源不存在</span>
            </div>
        </template>
        <el-result title="404" sub-title="您访问的资源不存在">
            <template #icon>
                <el-image :src="require('@/assets/404.svg')" fit="cover" :lazy="true"></el-image>
            </template>
            <template #extra>
                <RouterLink :to="{ name:'home' }" custom v-slot="{ navigate }">
                    <el-button type="primary" @click="navigate">访问主页</el-button>
                </RouterLink>
            </template>
        </el-result>
    </el-card>
</template>

<style lang="scss" scoped>
.box-card {
    .el-image{
        width: 300px;
        height: 300px;
    }
    :deep(.el-result__title p){
        font-size: 40px;
    }
    :deep(.el-result__subtitle p){
        font-size: 20px;
    }
}
</style>